<template>
  <!-- <span class="title">Task List</span> -->
  <div class="condition">
    <el-form :inline="true" :model="searchForm">
<<<<<<< HEAD
      <el-row :gutter="20">
        <el-col :span="6">
          <p>{{ t(`module.table.NoticeType`) }}</p>
          <el-select @change="filterTask" v-model="searchForm.type" :placeholder="t(`module.table.DefaultSelect`)">
=======
      <el-row :gutter="22" class="flex_start">
        <el-col :span="3">
          <p>{{ t(`module.table.NoticeType`) }}:</p>
        </el-col>
        <el-col :span="5">
          <el-select v-model="searchForm.type" :placeholder="t(`module.table.DefaultSelect`)">
>>>>>>> 0fe83608eb9ff321c262d4ad44d09aa9b39afa14
            <el-option :label="t(`module.table.All`)" :value="0"></el-option>
            <el-option :label="t(`module.table.Alarm`)" :value="1"></el-option>
            <el-option :label="t(`module.table.Fault`)" :value="2"></el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <p>{{ t(`module.table.Keywords`) }}:</p>
        </el-col>
        <el-col :span="6">
          <el-input
            v-model="searchForm.keyword"
            :placeholder="t(`module.table.DefaultInput`)"
            class="input-with-select"
          >
            <template #append>
              <el-button @click="filterTask" :icon="Search"></el-button>
            </template>
          </el-input>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="addReport">{{ t(`module.table.AddReport`) }}</el-button>
          <el-button type="info" @click="unHandle">{{ t(`module.table.DoNotHandle`) }}</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
  <div class="datatable">
    <el-table
      :data="tableData"
      border
      style="width: 100%; box-sizing: border-box;max-height:60vh;overflow:auto;"
      @selection-change="selectTask"
    >
      <!-- <el-table-column type="index" :align="'center'" /> -->
      <el-table-column :selectable="selectable" type="selection" width="55" />
      <el-table-column
        prop="created_at"
        :label="t(`module.table.CreateTime`)"
        :align="'center'"
        width="200"
      />
      <el-table-column
        :label="t(`module.table.NoticeType`)"
        :align="'center'"
        width="120"
      >
      <template #default="scope">
          <span>{{
            scope.row.type == 1
              ? t(`module.table.Alarm`)
              : t(`module.table.Fault`)
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="sn"
        :label="t(`module.table.Sn`)"
        :align="'center'"
        width="160"
      />
      <el-table-column
        prop="nickname"
        :label="t(`module.table.Nickname`)"
        :align="'center'"
        width="120"
      />
      <el-table-column
        prop="sensor_name"
        :label="t(`module.table.ChildDeviceName`)"
        :align="'center'"
        width="180"
      />
      <el-table-column
        prop="address"
        :label="t(`module.table.Address`)"
        :align="'center'"
        width="180"
      />
      <el-table-column
        prop="room_no"
        :label="t(`module.table.Room`)"
        :align="'center'"
        width="220"
      />
      <el-table-column
        prop="contact_name"
        :label="t(`module.table.ContactPerson`)"
        :align="'center'"
        width="180"
      />
      <el-table-column
        prop="contact_mobile"
        :label="t(`module.table.ContactTel`)"
        :align="'center'"
        width="220"
      />
      <el-table-column
        prop="has_report"
        :label="t(`module.table.Status`)"
        width="130"
        :align="'center'"
      >
        <template #default="scope">
          <span>{{
            scope.row.has_report == 0
              ? t(`module.table.DoNotHandle`)
              : scope.row.has_report == 1
              ? t(`module.table.HasHandle`)
              : t(`module.table.UnHandle`)
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :label="t(`module.table.Handle`)"
        width="140"
        :align="'center'"
      >
        <template #default="scope">
          <el-button
            v-if="scope.row.has_report == 1"
            @click="showReport(scope.row.id)"
            >{{ t(`module.table.CheckReport`) }}</el-button
          >
          <el-button v-else disabled>{{ t(`module.table.CheckReport`) }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row :gutter="20" class="mt_20">
      <el-col :span="10" :offset="10">
        <el-pagination
          small
          background
          layout="prev, pager, next"
          :total="total"
          class="mt-4"
          :current-page="page"
          @current-change="changePage"
        >
        </el-pagination>
      </el-col>
    </el-row>
  </div>


  <el-dialog
    center
    :close-on-click-modal="false"
    v-model="dialogFormVisible"
    title="Add report"
  >
    <el-form :model="form" label-width="auto">
      <el-form-item label="operater" :label-width="formLabelWidth">
        <el-input v-model="form.operater" autocomplete="off" />
      </el-form-item>
      <el-form-item label="operate time" :label-width="formLabelWidth">
        <el-date-picker
          v-model="form.operate_time"
          type="date"
          placeholder="Pick a day"
          size="large"
          value-format="YYYY-MM-DD 00:00:00"
        />
      </el-form-item>
      <el-form-item label="report" :label-width="formLabelWidth">
        <el-input type="textarea" v-model="form.report" autocomplete="off" />
      </el-form-item>
      <el-form-item label="remark" :label-width="formLabelWidth">
        <el-input type="textarea" v-model="form.remark" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">Cancel</el-button>
        <el-button type="primary" @click="submit">Confirm</el-button>
      </span>
    </template>
  </el-dialog>


  <el-dialog
    center
    :close-on-click-modal="false"
    v-model="dialogInfoVisible"
    title="Record"
  >
    <el-form :model="info">
      <el-form-item label="Operater" :label-width="formLabelWidth">
        <el-input disabled v-model="info.operater" autocomplete="off" />
      </el-form-item>
      <el-form-item label="Processed at" :label-width="formLabelWidth">
        <el-input disabled v-model="info.operate_time" autocomplete="off" />
      </el-form-item>
      <el-form-item label="Information" :label-width="formLabelWidth">
        <el-input
          disabled
          type="textarea"
          v-model="info.report"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="Remark" :label-width="formLabelWidth">
        <el-input
          disabled
          type="textarea"
          v-model="info.remark"
          autocomplete="off"
        />
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { onMounted, reactive, toRefs } from "vue";
import API from "api";
import { useI18n } from "vue-i18n";
import { Search } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";

export default {
  name: "Task-List",

  setup() {
    const { t } = useI18n();

    let state = reactive({
      tableData: [],
      searchForm: {
        type: "",
        keyword: "",
      },
      form: {
        action: "",
        task_ids: [],
        operater: "",
        operate_time: "",
        report: "",
        remark: "",
      },
      info: {
        operater: "",
        operate_time: "",
        report: "",
        remark: "",
      },
      dialogFormVisible: false,
      dialogInfoVisible: false,
      page: 1,
      total: 0,
    });

    onMounted(() => {
      getTaskList();
    });

    const getTaskList = () => {
      API.taskList({ page: state.page }).then((res) => {
        if (res.code == 0 && res.data.list.length > 0) {
          state.tableData = res.data.list;
          state.total = res.data.total;
        }
      });
    };

    const changePage = (page) => {
      state.page = page;
      getTaskList();
    };

    const filterTask = () => {
      API.taskList(state.searchForm).then((res) => {
        if (res.code == 0 && res.data.list.length > 0) {
          state.tableData = res.data.list;
          state.total = res.data.total;
        }
      });
    }

    const selectTask = (row) => {
      state.form.task_ids = [];
      if (row.length > 0) {
        row.forEach((element) => {
          state.form.task_ids.push(element.id);
        });
      }
    };

    const addReport = () => {
      if (state.form.task_ids.length == 0) {
        ElMessage.error("please select a task at least");
        return;
      }
      state.form.action = "add";
      state.dialogFormVisible = true;
    };

    const submit = () => {
      API.handleTask(state.form).then((res) => {
        if (res.code == 0) {
          ElMessage.success("process success");
          state.dialogFormVisible = false;
          return;
        } else {
          ElMessage.error(res.msg);
          return;
        }
      });
    };

    const showReport = (id) => {
      API.taskInfo({ id: id }).then((res) => {
        state.info = res.data;
        state.dialogInfoVisible = true;
      });
    };

    const cancel = () => {
      state.dialogFormVisible = false;
    };

    const unHandle = () => {
      if (state.form.task_ids.length == 0) {
        ElMessage.error("please select a task at least");
        return;
      }
      state.form.action = "un_handle";
      API.handleTask(state.form).then((res) => {
        if (res.code == 0) {
          ElMessage.success("process success");
          state.dialogFormVisible = false;
          return;
        } else {
          ElMessage.error(res.msg);
          return;
        }
      });
    };

    const searchTask = () => {};

    const selectable = (row, index) => {
      if (row.has_report == -1) {
        return true;
      }
      return false;
    };

    return {
      t,
      addReport,
      unHandle,
      searchTask,
      submit,
      cancel,
      showReport,
      selectTask,
      selectable,
      filterTask,
      ...toRefs(state),
      Search,
      changePage,
    };
  },
};
</script>

<style lang="scss" scoped>
.title {
  display: block;
  padding: 2rem 1rem;
  font-size: 2rem;
  font-weight: bolder;
  text-align: left;
}
.condition {
  margin-top: 4vh;
}
.search {
  display: flex;
  width: 30rem;
  padding: 1rem;
}
.datatable {
  box-sizing: border-box;

  padding: 0.625rem;
}
.ml-1 {
  margin-left: 1rem;
}
</style>
